Customizing Style Colors and Fonts
Description
Editing the colors and fonts used in a style has always been possible by editing the style sheet. For example, if you are using the iOS7 style, you could edit this style and customize all colors and fonts.
Discussion
However, if you edit the style, you create your own copy of the style. That means that if Alpha subsequently modifies this style (for example, by adding new CSS classes for some new control type that is added to the UX), your style will not see these new classes unless you manually add them to your copy of the style.
Also, bringing up the style builder just to change one of the colors in the style seems like overkill.
Adjusting Colors in a Style using SASS Variables
A new option is now available for 'version 3' (e.g. iOS7, AndroidDark, AndroidLight) and 'version 4' (e.g. Alpha) styles. These styles use SASS variables to define the colors and fonts used in the stylesheet.
To edit colors and fonts, click the smart field for the Customize style colors and fonts property.
The dialog in the image shown below will be displayed.
When you edit the colors and fonts using this builder, you are not editing the base style sheet. Instead you are storing your adjustments to the style in a separate file. This means that if the style sheet is changed by Alpha, you will get all of the edits applied to the style by Alpha, and you will still get your color and font changes.
To see the file in which your edits are stored click the Manage files hyperlink at the bottom of the dialog.
When you customize the colors and fonts for a style, the edits apply to all components in your project that use the style. So, even though you might be in UXComponent1 when you edit the colors, UXComponent2 (for example), if it uses the same style as UXComponent1, will get the same edits to the colors and fonts.
If you want to delete the custom colors you have defined, open the editor, and click the Manage files hyperlink and then delete the styleTweaks.json file that contains the settings.
Using Pre-defined Color Palettes
Several pre-defined color palettes are available for the Alpha style. These color palettes can be used to quickly change all the colors in the Alpha style to a new theme in a component. Available color palettes include:
- Blue
- Coffee
- Dark
- Magenta
- Purple
- Slate
Applying a Palette
Color palettes are applied to the Alpha style without modifying the original stylesheet. Palettes can be added using the Custom style colors and fonts property for a component.
Click the
button for the Custom style colors and fonts property to edit the style.
Next, click the Use a Pre-Defined Color Palette to open the Select Palette dialog.
Choose a palette and click OK.
Adding Web Fonts to a Style
Web fonts can be distributed with web and mobile applications. The CSS @font-face rule can be used to specify fonts that are part of an application that will be downloaded if the font is not present on the device. The @font-face rule is specified in the stylesheet used by the application. The URL for the web font files can be an absolute URL or a relative URL. For example, the Alpha style can be extended to include a web font as follows:
@font-face{
font-family: 'MyWebFont';
src: url('WebFont.eot');
src: url('WebFont.eot?#iefix') format('embedded-opentype'),
url('WebFont.woff') format('woff'),
url('WebFont.ttf') format('truetype'),
url('WebFont.svg#webfont') format('svg');
}The font-family property defines the name of the font that will be assigned when the font is loaded from the URL defined in the src property.
After defining the location of the font files, the font can be referenced by the font-family property throughout an application or added to a SASS variable (such as $fontFamily variable defined in the Alpha style) as follows:
$fontFamily: 'MyWebFont', Arial, san-serif; // *AA:Font|Family|fontFamily|The font family to use.
To learn more about @font-face, click here.
Using Fonts Hosted on Third Party Sites
Web fonts can also be loaded from a third party source, such as Google Fonts. Check the documentation for the third-party font hosting site to learn how to include the font files in an application.